<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>咨询</title>
    <link rel="stylesheet" href="../src/css/weui.css">
    <script src="../src/js/libs/jquery-3.0.0.min.js"></script>
    <script src="../src/js/main.js"></script>
    <style>
        /* 消息数目样式 */
        .weui_media_box .weui_media_desc.message-num{
            background: #FF3366;
            width: 1.5rem;
            height: 1.5rem;
            line-height: 1.5rem;
            font-size: 1.2rem;
            border-radius: 50%;
            color: #FFFFff;
            text-align: center;
        }
    </style>
</head>
<body>

<div class="searchbar">
    <div class="bd">
        <!--<a href="javascript:;" class="weui_btn weui_btn_primary">点击展现searchBar</a>-->
        <div class="weui_search_bar" id="search_bar">
            <form class="weui_search_outer">
                <div class="weui_search_inner">
                    <i class="weui_icon_search"></i>
                    <input type="search" class="weui_search_input" id="search_input" placeholder="搜索" required="">
                    <a href="javascript:" class="weui_icon_clear" id="search_clear"></a>
                </div>
                <label for="search_input" class="weui_search_text" id="search_text">
                    <i class="weui_icon_search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="javascript:" class="weui_search_cancel" id="search_cancel">取消</a>
        </div>
        <div class="weui_cells weui_cells_access search_show" id="search_show" style="display: none;">
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>实时搜索文本</p>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>实时搜索文本</p>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>实时搜索文本</p>
                </div>
            </div>
            <div class="weui_cell">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>实时搜索文本</p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="weui_panel weui_panel_access">
    <div class="weui_panel_bd">
        <a href="javascript:void(0);" class="weui_media_box weui_media_appmsg">
            <div class="weui_media_hd">
                <img class="weui_media_appmsg_thumb" src="" alt="">
            </div>
            <div class="weui_media_bd">
                <h4 class="weui_media_title">程先生</h4>
                <p class="weui_media_desc">请问汽车保养的周期是多长，我……</p>
            </div>
            <div class="weui_media_ft">
                <p class="weui_media_title">14：56</p>
                <p class="weui_media_desc message-num">4</p>
            </div>
        </a>
    </div>
    <a class="weui_panel_ft" href="javascript:void(0);">查看更多</a>
</div>
</body>
</html>